import React, { PureComponent } from 'react';
import router from 'umi/router';
import { Dispatch } from 'redux';
import { connect } from 'dva';
import { Card, Row, Col, Tag, Divider } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Loading } from '@/models/connect';
import { StateType } from './model';

import styles from './index.less';
import logo from '../../../../public/favicon.png';

const operationTabList = [
  { key: 'articles', tab: '笔记' },
  { key: 'applications', tab: '应用' },
  { key: 'projects', tab: '项目' },
];

interface State {
  accountCenter: StateType;
  loading: Loading;
}

interface CenterProps {
  dispatch: Dispatch;
  accountCenter: StateType;
  loading: boolean;
  location: any;
  match: any;
}

interface CenterState {}

@connect(({ accountCenter, loading }: State) => ({
  accountCenter,
  loading: loading.models.accountCenter,
}))
class Center extends PureComponent<CenterProps, CenterState> {
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({ type: 'accountCenter/fetchAccount' });
  }

  onTabChange = (key: string) => {
    const { match } = this.props;
    router.push(`${match.url}/${key}`);
  };

  render() {
    const { accountCenter, loading, location, match, children } = this.props;
    const { account } = accountCenter;
    return (
      <PageHeaderWrapper title={false}>
        <Row gutter={24}>
          <Col lg={7} md={24}>
            <Card loading={!account && loading} bordered={false} style={{ marginBottom: 24 }}>
              {account && (
                <>
                  <div className={styles.avatarHolder}>
                    <img alt="logo" src={logo} />
                    <div className={styles.name}>{account.name}</div>
                    <div>{account.signature}</div>
                  </div>
                  <div className={styles.detail}>
                    <p>
                      <i className={styles.title} />
                      {account.title}
                    </p>
                    <p>
                      <i className={styles.group} />
                      {account.email}
                    </p>
                    <p>
                      <i className={styles.address} />
                      {account.geographic!.province!.label}&nbsp;
                      {account.geographic!.city!.label}
                    </p>
                  </div>
                  <Divider dashed />
                  <div className={styles.tags}>
                    <div className={styles.tagsTitle}>标签</div>
                    {account.tags!.map(item => (
                      <Tag key={item.key}>{item.label}</Tag>
                    ))}
                  </div>
                </>
              )}
            </Card>
          </Col>
          <Col lg={17} md={24}>
            <Card
              className={styles.tabsCard}
              bordered={false}
              tabList={operationTabList}
              activeTabKey={location.pathname.replace(`${match.path}/`, '')}
              onTabChange={this.onTabChange}
            >
              {children}
            </Card>
          </Col>
        </Row>
      </PageHeaderWrapper>
    );
  }
}

export default Center;
